window.onload = function(){                      //页面加载完执行函数
	imgLocation("container","box")
	var imgData={"data":[{"src":"1.jpg"},{"src":"2.jpg"},{"src":"3.jpg"},{"src":"4.jpg"},{"src":"5.jpg"},{"src":"6.jpg"},{"src":"7.jpg"},{"src":"8.jpg"},{"src":"9.jpg"},{"src":"10.jpg"}]}
	window.onscroll = function(){
		if(checkFlag()){
			var cparent = document.getElementById("container");
			for(var i=0; i<imgData.data.length;i++){                    
				var ccontent = document.createElement("div");                 
				ccontent.className="box";           
				cparent.appendChild(ccontent);                            //插入节点
				var boximg = document.createElement("div");
				boximg.className="box_img";
				ccontent.appendChild(boximg);
				var img = document.createElement("img");
				img.src="image/"+imgData.data[i].src;                    //图片地址取imgData里的数据
				boximg.appendChild(img);                     
			}
		imgLocation("container","box")                                 //为新加载的引用函数
		}
	}
}
function checkFlag(){
	var cparent = document.getElementById("container");
	var ccontent = getChildElement(cparent,"box");  
	var lastContentHeight = ccontent[ccontent.length - 1].offsetTop;
	var scrollTop = document.documentElement.scrollTop||document.body.scrollTop;
	var pageHeight = document.documentElement.clientHeight||document.body.clientHeight;
	if(lastContentHeight<scrollTop+pageHeight) {                                    //计算实际高度距离
		return true;
	} 
}
function imgLocation(parent,content){
	//将parent下所有的content全部取出
	var cparent = document.getElementById(parent);              //获取id=container的元素
	var ccontent = getChildElement(cparent,content);            //获取id=container下属的元素
	//console.log(ccontent.length);                             //打印下属的个数
	var imgWidth = ccontent[0].offsetWidth;                     //获取第一个元素的宽度
	var num = Math.floor(document.documentElement.clientWidth / imgWidth);    //页面宽度除以第一个元素的宽度的值，然后取小于等于最接近这个值的整数
	cparent.style.cssText = "width:"+imgWidth*num+"px;margin:0 auto";  //整体这块的宽度修改为第一个元素的宽度乘以刚才计算的个数，并居中；
	
	var BoxHeightArr=[];
	for(var i=0;i<ccontent.length;i++){
		if(i<num){
			BoxHeightArr[i] = ccontent[i].offsetHeight;	
		}else{
			var minheight = Math.min.apply(null,BoxHeightArr);             //寻找数组中最小的值
			var minIndex = getminheightLocation(BoxHeightArr,minheight);
			ccontent[i].style.position = "absolute";
			ccontent[i].style.top = minheight+"px";                        //距离顶部为最小高度
			ccontent[i].style.left = ccontent[minIndex].offsetLeft+"px";              
			BoxHeightArr[minIndex] = BoxHeightArr[minIndex]+ccontent[i].offsetHeight;      //第二个继续找当前最短的填充进去
		}		
	}
}
function getminheightLocation(BoxHeightArr,minHeight){      //返回符合最小值的元素的序号
	for(var i in BoxHeightArr){
		if(BoxHeightArr[i] == minHeight){
			return i;
		}
	}	
}
function getChildElement(parent,content){                   //获取所有下属元素
	var contentArr=[];
	var allcontent = parent.getElementsByTagName("*");
	for(var i=0;i<allcontent.length;i++){
		if(allcontent[i].className==content){
			contentArr.push(allcontent[i]);	
		}
	}
	return contentArr;
}